<template>
    <div id="app">

        <transition :name="aniType">
            <keep-alive>
                <router-view class="router-view"/>
            </keep-alive>
        </transition>
        <transition :name="aniType">
            <Tabbar style="background-color: white;position: fixed;
                    bottom: 0; left: 0; box-sizing: border-box;" v-show="showTabbar">
                <tabbar-item link="/home" :selected="$route.path=='/home'">
                    <img style="width:8.2vw;height:7.7vw;" class="tabbar-item" slot="icon" src="/img/icons/资源11.png">
                    <img style="width:8.2vw;height:7.7vw;" class="tabbar-item" slot="icon-active" src="/img/icons/资源21.png">
                    <span style="font-size:3.5vw" slot="label">&nbsp;&nbsp;首页</span>
                </tabbar-item>
                <tabbar-item link="/find" :selected="$route.path=='/find'">
                    <img style="width:8.2vw;height:7.7vw" class="tabbar-item" slot="icon" src="/img/icons/资源12.png">
                    <img style="width:8.2vw;height:7.7vw" class="tabbar-item" slot="icon-active" src="/img/icons/资源22.png">
                    <span style="font-size:3.5vw" slot="label">&nbsp;&nbsp;分类</span>
                </tabbar-item>
                <tabbar-item link="/order" :selected="$route.path=='/order'">
                    <img style="width:8.2vw;height:7.7vw" class="tabbar-item" slot="icon" src="/img/icons/资源15.png">
                    <img style="width:8.2vw;height:7.7vw" class="tabbar-item" slot="icon-active" src="/img/icons/资源25.png">
                    <span style="font-size:3.5vw" slot="label">&nbsp;&nbsp;发现</span>
                </tabbar-item>
                <tabbar-item link="/mine"  :selected="$route.path=='/mine'">
                    <img style="width:8.2vw;height:7.7vw;" class="tabbar-item" slot="icon" src="/img/icons/资源13.png">
                    <img style="width:8.2vw;height:7.7vw;" class="tabbar-item" slot="icon-active" src="/img/icons/资源23.png">
                    <span style="font-size:3.5vw" slot="label">&emsp;购物车</span>
                </tabbar-item>
                <tabbar-item link="/myself"  :selected="$route.path=='/myself'">
                    <img style="width:7.1vw;height:7.2vw;" class="tabbar-item" slot="icon" src="/img/icons/资源14.png">
                    <img style="width:7.1vw;height:7.2vw;" class="tabbar-item" slot="icon-active" src="/img/icons/资源24.png">
                    <span style="font-size:3.5vw" slot="label">&nbsp;&nbsp;个人</span>
                </tabbar-item>            
            </Tabbar>
        </transition>

    </div>
</template>


<script>
    import {Tabbar,TabbarItem} from "vux";

    export default {
        components:{
            Tabbar,
            TabbarItem
        },
        mounted() {
            
        },
        data(){
            return {
                aniType:"",
                showTabbar:true
            }
        },
        watch:{
            $route(n,o){
                // console.log(n);
                // console.log(o);                
                let nPath = n.path.split("/").length;
                let oPath = o.path.split("/").length;
                if(nPath>oPath){
                    this.aniType = "push";
                }else if(nPath<oPath){
                    this.aniType = "pop";
                }else{
                    this.aniType = "";
                }
                if(o.name===null){
                    this.aniType = "";
                }
                if(nPath>2){
                    this.showTabbar = false;
                }else{
                    this.showTabbar = true;
                }
            }
        }
    }
</script>

<style>
    body{
        overflow-x: hidden;
        padding-bottom: 14.3vw;
        background-color: rgb(241 ,241, 241);
    }
    *{
        margin: 0;
        box-sizing: border-box;
    }
    /* .tabbar-icon{
        position: relative;
        left: 3px;
    } */
    .tabbar-item{
        position: relative;
        left: 1vw;
    }
    a{
        text-decoration: none;
        color: black;        
    }
    span{
        display: inline-block;
    }
    .router-view{
        background-color: white;
        overflow-y: scroll;
    }
    .push-enter{
        left: 100%;
    }
    .push-enter-active{
        position: absolute;
        width: 100%;
        transition: all 0.7s;
        z-index: 1000;
    }
    .push-enter-to{
        left: 0;
    }
    .push-leave{
        left: 0;
    }
    .push-leave-active{
        position: absolute;
        width: 100%;
        transition: all 0.7s;
    }
    .push-leave-to{
        left: -30%;
    }
    .pop-enter{
        left: -30%;
    }
    .pop-enter-active{
        position: absolute;
        width: 100%;
        transition: all 0.7s;
        z-index: 1;
    }
    .pop-enter-to{
        left: 0;
    }
    .pop-leave{
        left: 0;
    }
    .pop-leave-active{
        z-index: 1000;
        position: absolute;
        width: 100%;
        transition: all 0.7s;
    }
    .pop-leave-to{
        left: 100%;
    }
</style>